<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
        <div class="top">
        <h2>郑涵林的个人blog</h2>
        <h6> 又一个wordPress的站点</h6>
    </div>
    <div class="moddle">
        
        <div class="left">
        <p><h1>世界，你好！</h1>
            <p><h6>2016年1月30号&emsp;&emsp;&emsp;&emsp;欢迎使用WordPress:这是您的第一遍文章,编辑或者删除它,然后开始写作吧!<br>第一条评论</h6></p>
        </p>
        </div>
         <div class="right">
            <div class="top-list">
                <div class="tt">
                    <input type="search" placeholder="搜索" style="width:300px; height:50px; margin-top: 20px;">
                </div>
                <div class="tt">
                    <p>近期文章</p>
                        <li>红楼梦</li>
                </div>
                 <div class="tt">
                    <p>近期评论</p>
                         <li>wordpress</li>
                </div>
                 <div class="tt">
                    <p>文章归档</p>
                        <li>未分录</li>
                </div>
                 <div class="tt">
                    <p>功能</p>
                        <li>登录</li>
                        <li>文章RSS</li>
                        <li>评论RSS</li>
                        <li>wordpress.org</li>
                </div>

            </div>
        </div>
    </div>
    <div class="bottom">
        <p><h6>个人blog</h6></p>
    </div>
    </div>
    
</template>

<style scoped>
 .top{
            height: 100px;
        }
        .moddle{
            display: flex;
            height: 500px;  
            /* border: 3px solid pink;   */
            gap:0;
          
        }
        .left{
            width: 70%;
            /* border: 3px solid blue; */

        }
        .right{
            width: 30%;
            /* border: 3px solid red; */
        }
        .bottom{
            height: 100px;
        }
        .top-list{
            /* list-style: none; */
            padding: 0;
            margin: 0;
        }

        
        .top-list li{
            list-style-type: disc;
            padding: 1px 0;
        }
        
         .tt{
            height: 100px;
            border-top-style: solid;
            border-top-width: 2px;
            border-top-color: black;
         }
         li{
            color: rgb(74, 131, 237);
         }
        
</style>
